<template>
  <div class="setting-box">
    <s-header :title="'账号管理'"></s-header>
    <div class="input-item">
      <van-field v-model="data.userData.nickname" label="昵称"></van-field>
      <van-field v-model="data.userData.sign" label="个性签名"></van-field>
      <van-field
        v-model="data.userData.password"
        type="password"
        label="修改密码"
      ></van-field>
      <van-field
        v-model="data.userData.surepassword"
        type="password"
        label="确认修改密码"
      ></van-field>
    </div>
    <van-button
      class="save-btn"
      color="#1cacac"
      type="primary"
      @click="save"
      block
    >
      保存
    </van-button>
    <van-button
      class="save-btn"
      color="#1cacac"
      type="primary"
      @click="logout"
      block
    >
      退出登录
    </van-button>
  </div>
</template>

<script lang="ts">
import sHeader from "@/components/SimpleHeader";
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { Toast } from "vant";
import { getCurrentUserData, alertUserData } from "../service/setting";

interface data {
  userData: userData;
}
interface userData {
  nickname: string;
  sign: string;
  password: string;
  surepassword?: string;
  username: string;
  userid: number;
}
// import { loginUser } from "../service/setting";
export default defineComponent({
  name: "setting",
  components: { sHeader },
  setup() {
    // fake Data
    const data: data = reactive({
      userData: {
        nickname: "",
        password: "",
        surepassword: "",
        sign: "",
        username: "",
        userid: 0,
      },
    });

    // 保存
    const save = async () => {
      if (data.userData.password.trim() == "")
        return Toast.fail("密码不能为空");
      if (data.userData.password !== data.userData.surepassword)
        return Toast.fail("两次输入的密码必须相同");
      const params = {
        password: data.userData.password,
        nickname: data.userData.nickname,
        sign: data.userData.sign,
      };
      console.log(params);

      const dat:any = await alertUserData(params, data.userData.userid);
      console.log(dat);
      if (dat.code === 1000) {
        Toast.success("保存成功,请重新登录");
        localStorage.removeItem("token");
        window.location.href = "/";
      } else {
        Toast.fail("保存失败！");
      }
    };

    // 登出
    const logout = async () => {
      //   const { resultCode } = await logout();
      const resultCode = 200;
      if (resultCode === 200) {
        localStorage.removeItem("token");
        window.location.href = "/";
      }
    };

    onMounted(() => {
      // loginUser({ username: "admin", password: "1234" });
      async function getUserData() {
        const userData: any = await getCurrentUserData();
        console.log(userData);
        if (userData.code === 2003 || userData.code === 10086) return;
        data.userData = {
          username: userData.data.username,
          nickname: userData.data["nick_name"],
          sign: userData.data.sign,
          userid: userData.data.id,
          password: "",
        };
        console.log(userData);
      }
      getUserData();
    });
    return {
      data,
      save,
      logout,
    };
  },
});
</script>

<style lang="less">
.setting-box {
  .input-item {
    margin-top: 44px;
  }
  .save-btn {
    width: 80%;
    margin: 20px auto;
    border-radius: 35px;
  }
}
</style>